<template>
  <div class="paySuccess">
        <div class="info"><driver-info></driver-info></div>
        <div class="payResult">
            <p><em>{{fee_detail.order_amount}}</em>元</p>
            <p>优惠券-{{fee_detail.coupon_amount}}元</p>
        </div>
        <div class="evaluate" @click="evaluate">评价本次服务</div>
  </div>
</template>

<script>
    import driverInfo from '@/components/common/driverInfo'
    import {mapGetters} from 'vuex'
    import {feeDetail} from '@/http'
    export default {
        name:'paySuccess',
        data(){
            return {
                fee_detail:{
                    "order_amount": "7.00",
                    "starting_fee": "7.00",
                    "mileage_fee": "0.00",
                    "timer_fee": "0.03",
                    "other_fee": "0.00",
                    "mileage_num": "0.00",
                    "timer_num": "0.08",
                    "driver_tips": "0.00",
                    "remark": "",
                    "extra_fee": "0.00",
                    "coupon_amount":'0'
                }
            }
        },
        components:{driverInfo},
        computed:{
            ...mapGetters(['curOrder'])
        },
        methods:{
            evaluate(){
                this.$store.dispatch('switchTravel','evaluate')
            },
            feeDetail(){
                feeDetail(this.curOrder.id).then((data)=>{
                    if(data.code == 0){
                        this.fee_detail = data.data
                    }
                })
            }
        },
        mounted(){
           this.feeDetail()
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../../../style/var.scss';

    .paySuccess{
        width:100%;
        background:#fff;
        box-shadow: 0 0 10px 0 $font_color_sub;
        .info,.payResult{
            border-bottom:1px solid $border_base;
        }
        .payResult{
            text-align: center;
            padding:100px 0;
            em{font-size: 40px;}
            p:last-child{
                color:$font_color_sub;
            }
        }
        .evaluate{
            padding:50px;
            text-align: center;
            color:$primary;
        }
    }
</style>
